<template>
    <div class="content">
        <van-form colon @submit="onSubmit" validate-first @failed="onFailed">
            <div class="title">人员基本信息</div>
            <van-field
                    v-model="formItem.name"
                    name="name"
                    label="姓名"
                    placeholder="请填写真实姓名"
                    :maxlength="20"
                    @focus="bodyScrollTop"
                    @blur= "bodyScrollTop"
                    :rules="[{ validator: nameValidator,required: true, message: '请输入姓名' }]"></van-field>

            <van-field v-model="formItem.tel" name="tel" label="手机号" :rules="phoneRules" placeholder="请填写有效手机号"
                       @focus="bodyScrollTop" @blur="bodyScrollTop"/>

            <van-field
                    v-model="formItem.card_no"
                    name="card_no"
                    label="证件号码"
                    @blur="bodyScrollTop"
                    @focus="bodyScrollTop"
                    placeholder="请填写有效证件号码"
                    :rules="[{ validator: idCardValidator, message: '证件号码格式有误' }]"
            />
            <div class="div-bot">
                <van-button :disabled="submitDisabled" :loading="submitLoading" round block type="info"
                            native-type="submit" class="city-card-common-btn">
                    提交
                </van-button>
            </div>
        </van-form>
        <!--    提示说明    -->
        <van-popup v-model="showReadme" :close-on-click-overlay="false" safe-area-inset-bottom
                   :style="{ width: '80%', position: 'fixed', top: '50%', borderRadius: '10px' }">
            <div class="readme-popup">
                <div class="readme-popup-title">温馨提示</div>
                <div class="readme-popup-content">
                    <p>根据《中华人民共和国传染病防治法》和沈阳市新型冠状病毒感染的肺炎疫情防控指挥部相关通告，本地、外来入沈人员应主动申领“健康通行码”，作为个人在沈通行的电子凭证。</p>
                    <p>本次“健康通行码”申领将纳入个人征信评价，请您主动办理，如实填报各项信息。</p>
                    <p>感谢您对沈阳市疫情防控工作的支持配合！</p>
                    <div class="tong-yi-box">
                        <van-checkbox v-model="tongyi" style="float: left;margin: 0px 8px;"></van-checkbox>
                        <div>
                            本人主动申领“健康通行码”，自愿填报各项个人信息，并承诺填报信息真实准确。如有虚假，本人愿承担相关法律责任。
                        </div>
                    </div>
                </div>
                <div class="readme-popup-btn">
                    <van-button block type="info"
                                native-type="button"
                                size="small"
                                class="readme-popup-btn-sm"
                                @click="choose">
                        申领办理
                    </van-button>
                </div>
            </div>

        </van-popup>

    </div>
</template>

<script>
import {
  getOpenidInfo,
  getWorkerInfo,
  // insertUserpermit
  insertWorkerpermit
} from '@/api/yi-qing-fang-kong.js'
import {
// getCodePic,
// checkVerificationCode,
// createVerificationCode
} from '@/api/wx-api'
// vant组件
import {
// Dialog,
// Toast
} from 'vant'
// 页面模拟数据
// import mockData from './data/mockData.js'
// 工具
import {
  identityCodeValid,
  // identityCardnoSY,
  // getSexByIdCard,
  identityMobile
} from '@/libs/tools'
// 组件
// import wx from 'weixin-js-sdk'

export default {
  data () {
    this.phoneRules = [
      { required: true, message: '请输入手机号' },
      { validator: this.phoneValidator, message: '手机号格式错误' }
    ]
    this.codeRules = [
      { required: true, message: '请输入验证码' },
      { validator: this.codeValidator, message: '验证码错误' }
    ]
    return {
      formItem: {
        // 表单数据
        name: '',
        card_no: '',
        tel: ''
      },
      sendBtnType: false,
      showReadme: true,
      tongyi: false,
      submitDisabled: false,
      submitLoading: false,
      loading: false,
      loadingText: '加载中',
      routeObj: {}, // 路由对象,
      worker_type: ''
    }
  },
  computed: {},
  methods: {
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    idCardValidator (val) {
      // 身份证
      const reg1 = identityCodeValid(val)
      if (!reg1.pass) {
        // this.failNotice('请检查身份证格式！')
        return false
      }
    },
    phoneValidator (val) {
      return identityMobile(val)
    },
    nameValidator (val) {
      if (val === '') {
        this.failNotice('请输入姓名')
        return false
      }
      return true
    },
    onFailed (errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    onSubmit (value) {
      console.log('表单提交', this.formItem)
      // 校验姓名
      if (!this.formItem.name) {
        this.failNotice('请输入姓名')
        return false
      }
      // 校验证件号
      if (!this.formItem.card_no) {
        this.failNotice('请输入证件号码')
        return false
      } else {
        const rtn = identityCodeValid(this.formItem.card_no)
        if (!rtn.pass) {
          this.failNotice(rtn.tip)
          return false
        }
      }
      // 校验手机号
      if (!identityMobile(this.formItem.tel)) {
        this.failNotice('请输入正确手机号')
        return false
      }
      // 身份证去空格处理
      this.formItem.card_no = this.formItem.card_no.toString().trim()
      this.insertUserpermitAction()
    },
    // 表单提交
    insertUserpermitAction () {
      console.log('表单最终提交内容', this.formItem)
      // 表单提交
      // this.submitDisabled = false
      // this.submitLoading = true
      // insertUserpermit(this.formItem).then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.submitDisabled = true
      //     this.submitLoading = false
      //     console.log('保存回调', ret.data.data)
      //     window.localStorage.removeItem('formData')
      //     this.$dialog.alert({
      //       message: '您的电子通行证已生成!'
      //     }).then(() => {
      //       this.$router.push({
      //         // name: 'epidemic-submit-success-public',
      //         query: {}
      //       })
      //     })
      //   } else {
      //     this.submitDisabled = false
      //     this.submitLoading = false
      //     this.failNotice(ret.data.errmsg)
      //   }
      // })
      this.getWorkerInfoAction(this.formItem)
    },
    getWorkerInfoAction (val) {
      console.log('===')
      getWorkerInfo(val).then(ret => {
        if (ret.data.errcode === 0) {
          console.log('ret', ret.data.data)
          let workerTypeList = []
          for (let i = 0; i < ret.data.data.length; i++) {
            workerTypeList.push(ret.data.data[i].work_no)
          }
          this.worker_type = workerTypeList.join()
          let data = {
            worker_type: this.worker_type,
            card_no: val.card_no,
            name: val.name,
            tel: val.tel
          }
          this.insertWorkerpermit(data)
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    insertWorkerpermit (val) {
      insertWorkerpermit(val).then(ret => {
        if (ret.data.errcode === 0) {
          this.$router.push({
            name: 'epidemic-submit-success-public'
          })
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    getOpenidInfoAction () {
      getOpenidInfo({ type: '1' }).then(ret => {
        console.log('判断是否注册过', ret.data)
        if (ret.data.errcode === 0) {
          if (!this.$common.xeUtils.isEmpty(ret.data.data.result)) {
            this.$dialog.alert({
              message: '您已经填报过信息!'
            }).then(() => {
              this.$router.push({
                name: 'epidemic-submit-success-public',
                query: {}
              })
            })
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    // 去苹果机型白边
    bodyScrollTop () {
      winToTop()
      this.setStorage(this.formItem)
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    choose () {
      if (this.tongyi) {
        this.showReadme = false
      } else {
        this.showReadme = true
      }
    }

  },
  mounted () {
    // 获取路由信息
    this.routeObj = this.$route.query
    console.log('表单页面路由信息', this.routeObj)
    // 获取登录信息
    this.getOpenidInfoAction()
    // 获取本地表单数据
    if (window.localStorage.getItem('formData')) {
      this.formItem = JSON.parse(window.localStorage.getItem('formData'))
      console.log('表单页面表单数据', this.formItem)
      window.localStorage.removeItem('formData')
    }
  },
  watch: {
    formItem () {
      console.log('formItem变化啦')
    }
  }
}
</script>

<style scoped>
    /deep/ .van-field__label {
        min-width: 5.625rem;
        margin-right: 10px;
        width: auto;
    }

    .mobile-verify-code {
        display: flex;
        justify-content: center;
        padding: 15px;
    }

    .success-code {
        display: flex;
        justify-content: center;
        padding: 5px 15px 10px;
    }

    .success-title {
        padding: 5px;
        text-align: center;
    }

    .van-radio {
        float: left;
        margin-right: 10px;
    }

    .van-popup /deep/ .van-ellipsis {
        font-size: 0.95rem;
    }

    .title {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        font-size: 12px;
    }

    .action-item .van-cell__title {
        -webkit-box-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit;
        width: 5.625rem;
    }

    .content {
        width: 100%;
        background-color: #F5F5F5;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .content >>> .van-cell {
        margin: 0 2%;
        width: 96%;
        font-size: 12px;
    }

    .content >>> .van-dialog__content {
        padding: 10px;
        text-align: center;
    }

    .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value .van-field__body .van-field__control {
        font-size: 12px;
    }

    .content >>> .van-cell__value {
        text-align: left;
    }

    .div-bot {
        margin: 10px;
    }

    .div-bot >>> .van-button--info {
        border: 1px solid #75ACDC;
    }

    .div-bot >>> .van-button {
        height: 2.5rem;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #75ACDC;
    }

    .content >>> .van-cell__value {
        /*flex: inherit;*/
        font-size: 12px;
    }

    .content >>> .value-item .van-cell__value {
        width: 100%;
    }

    .van-action-sheet__cancel, .van-action-sheet__item {
        font-size: 12px;
    }

    .van-cell__value span {
        /*color: black;*/
    }

    .van-dropdown-menu {
        height: 25px;
    }

    .van-hairline--top-bottom::after {
        border-width: 0px 0px;
    }

    .chaochu >>> .van-cell__value {
        width: 100%;
    }

    .div1 >>> .van-cell__value {
        width: 100%;
    }

    .div2 >>> .van-cell__value {
        width: 100%;
    }

    .other-info .van-field__label.radio-item, .tou .van-field__label.radio-item {
        width: 8.625rem;
    }

    .suggest.van-cell.van-field span {
        width: 5rem;
    }

    .readme-popup {
        padding: 25px;
    }

    .readme-popup .readme-popup-title {
        text-align: center;
        color: red;
        font-weight: bold;
        text-decoration: underline;
    }

    .readme-popup p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        text-indent: 25px
    }

    .readme-popup-btn {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .readme-popup-btn-sm {
        width: 45%;
    }

    .tong-yi-box {
        font-size: 12px;
    }

    .tong-yi-box >>> .van-checkbox__icon {
        font-size: 15px;
    }
    /*.content >>> .van-button--small{*/
    /*    padding: 0;*/
    /*}*/
</style>
